<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<!-- ko if: (canInitialise())-->
<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
    <div class="payment-method-title field choice">
        <input type="radio"
               name="payment[method]"
               class="radio"
               data-bind="attr: {'id': getCode()},
                          value: getCode(),
                          checked: isChecked,
                          click: selectPaymentMethod,
                          visible: isRadioButtonVisible()"/>
        <label class="label" data-bind="attr: {'for': getCode()}"><span data-bind="text: getTitle()"></span></label>
    </div>

    <div class="payment-method-content">
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <div class="payment-method-billing-address">
            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>

        <form class="form" id="co-transparent-form" action="#" method="post" data-bind="mageInit: {
            'transparent':{
                'context': context(),
                'gateway': getCode(),
                'controller': getControllerName(),
                'orderSaveUrl':getPlaceOrderUrl(),
            }, 'validation':[]}">
            <fieldset data-bind="attr: {class: 'fieldset payment items ccard ' + getCode(), id: 'braintree_form_cc'}">
                <!-- ko if: (isShowLegend())-->
                <legend class="legend"><span><!-- ko i18n: 'Credit Card Information'--><!-- /ko --></span></legend><br />
                <!-- /ko -->
                <!-- ko if: (useVault()) -->
                <div>
                    <label data-bind="attr: {for: getCode() + '_cc_token'}" class="label">
                        <span><!-- ko i18n: 'Payment Information'--><!-- /ko --></span>
                    </label>
                    <div class="control">
                        <select name="payment[cc_token]" class="select"
                                data-bind="attr: {id: getCode() + '_cc_token', 'data-container': getCode() + '-cc-token'},
                                            mageInit: {creditCardType:{creditCardTypeContainer:'#' + getCode() + '_cc_type_ss_div'}},
                                            enable: true,
                                            options: getStoredCards(),
                                            optionsValue: 'token',
                                            optionsText: 'maskedNumber',
                                            optionsCaption: $t('Add new card'),
                                            value: selectedCardToken">
                        </select>
                    </div>
                </div>
                <div>&nbsp;</div>
                <!-- /ko -->
                <div data-bind="visible: isCcFormShown, attr: {class: getCssClass()}">
                    <!-- ko if: (!isCcDetectionEnabled())-->
                    <label data-bind="attr: {for: getCode() + '_cc_type'}" class="label">
                        <span><!-- ko i18n: 'Credit Card Type'--><!-- /ko --></span>
                    </label>
                    <!-- /ko -->
                    <div class="control">
                        <!-- ko if: (!isCcDetectionEnabled())-->
                        <select name="payment[cc_type]" class="select"
                                data-bind="attr: {id: getCode() + '_cc_type', 'data-container': getCode() + '-cc-type', 'data-validate': JSON.stringify({required:true, 'validate-cc-type-select':'#' + getCode() + '_cc_number'})},
                                            mageInit: {creditCardType:{creditCardTypeContainer:'#' + getCode() + '_cc_type_ss_div'}},
                                            enable: true,
                                            options: availableCcValues,
                                            optionsValue: 'value',
                                            optionsText: 'type',
                                            optionsCaption: $t('--Please Select--'),
                                            value: creditCardType">
                        </select>
                        <!-- /ko -->
                        <!-- ko if: (isCcDetectionEnabled())-->
                        <ul class="credit-card-types">
                            <!-- ko foreach: {data: availableCcValues, as: 'item'} -->
                            <li class="item" data-bind="css: {
                                                            _active: $parent.selectedCardType() == item.value,
                                                            _inactive: $parent.selectedCardType() != null && $parent.selectedCardType() != item.value
                                                            } ">
                                <!--ko if: $parent.getIcons(item.value) -->
                                <img data-bind="attr: {
                                    'src': $parent.getIcons(item.value).url,
                                    'alt': item.type,
                                    'width': $parent.getIcons(item.value).width,
                                    'height': $parent.getIcons(item.value).height
                                    }">
                                <!--/ko-->
                            </li>
                            <!--/ko-->
                        </ul>
                        <input type="hidden"
                               name="payment[cc_type]"
                               class="input-text"
                               value=""
                               data-bind="attr: {id: getCode() + '_cc_type', 'data-container': getCode() + '-cc-type'},
                               value: creditCardType
                               ">
                        <!-- /ko -->
                    </div>
                </div>
                <div class="field number required" data-bind="visible: isCcFormShown">
                    <label data-bind="attr: {for: getCode() + '_cc_number'}" class="label">
                        <span><!-- ko i18n: 'Credit Card Number'--><!-- /ko --></span>
                    </label>
                    <div class="control">
                        <input type="number" name="payment[cc_number]" class="input-text" value=""
                               data-bind="attr: {
                                    autocomplete: off,
                                    id: getCode() + '_cc_number',
                                    title: $t('Credit Card Number'),
                                    'data-container': getCode() + '-cc-number',
                                    'data-validate': JSON.stringify({'required-number':true, 'validate-card-type':getCcAvailableTypesValues(), 'validate-card-number':'#' + getCode() + '_cc_type', 'validate-cc-type':'#' + getCode() + '_cc_type'})},
                              enable: isActive($parents),
                              value: creditCardNumber,
                              valueUpdate: 'keyup' "/>
                    </div>
                </div>
                <div class="field date required" data-bind="attr: {id: getCode() + '_cc_type_exp_div'}, visible: isCcFormShown">
                    <label data-bind="attr: {for: getCode() + '_expiration'}" class="label">
                        <span><!-- ko i18n: 'Expiration Date'--><!-- /ko --></span>
                    </label>
                    <div class="control">
                        <div class="fields group group-2">
                            <div class="field no-label month">
                                <div class="control">
                                    <select  name="payment[cc_exp_month]" class="select month"
                                        data-bind="attr: {id: getCode() + '_expiration', 'data-container': getCode() + '-cc-month', 'data-validate': JSON.stringify({required:true, 'validate-cc-exp':'#' + getCode() + '_expiration_yr'})},
                                        enable: true,
                                        options: getCcMonthsValues(),
                                        optionsValue: 'value',
                                        optionsText: 'month',
                                        optionsCaption: $t('Month'),
                                        value: creditCardExpMonth">
                                    </select>
                                </div>
                            </div>
                            <div class="field no-label year">
                                <div class="control">
                                    <select name="payment[cc_exp_year]" class="select year"
                                        data-bind="attr: {id: getCode() + '_expiration_yr', 'data-container': getCode() + '-cc-year', 'data-validate': JSON.stringify({required:true})},
                                        enable: true,
                                        options: getCcYearsValues(),
                                        optionsValue: 'value',
                                        optionsText: 'year',
                                        optionsCaption: $t('Year'),
                                        value: creditCardExpYear">
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ko if: (hasVerification())-->
                <div class="field cvv required" data-bind="attr: {id: getCode() + '_cc_type_cvv_div'}, visible: isCcFormShown">
                    <label data-bind="attr: {for: getCode() + '_cc_cid'}" class="label">
                        <span><!-- ko i18n: 'Card Verification Number'--><!-- /ko --></span>
                    </label>
                    <div class="control _with-tooltip">
                        <input type="number"
                               class="input-text cvv"
                               name="payment[cc_cid]"
                               value=""
                               data-bind="attr: {id: getCode() + '_cc_cid',
                               title: $t('Card Verification Number'),
                               'data-container': getCode() + '-cc-cvv',
                               'data-validate': JSON.stringify({'required-number':true, 'validate-cc-cvn':'#' + getCode() + '_cc_type'})},
                               enable: true,
                               value: creditCardVerificationNumber" />
                        <div class="field-tooltip toggle">
                            <span class="field-tooltip-action action-cvv"
                                  tabindex="0"
                                  data-toggle="dropdown"
                                  data-bind="attr: {title: $t('What is this?')}, mageInit: {'dropdown':{'activeClass': '_active'}}">
                                <span><!-- ko i18n: 'What is this?'--><!-- /ko --></span>
                            </span>
                            <div class="field-tooltip-content"
                                 data-target="dropdown"
                                 data-bind="html: getCvvImageHtml()"></div>
                        </div>
                    </div>
                </div>
                <!-- /ko -->
                <!-- ko if: (canSaveCard)-->
                <div class="field" data-bind="visible: isCcFormShown">
                    <label class="label">
                        <span></span>
                    </label>
                    <div class="control">
                        <input type="checkbox"
                               name="payment[store_in_vault]"
                               id="braintree_store_in_vault"
                               value="1"
                               checked="checked"
                               class="checkbox"
                               data-bind="checked: storeInVault"/>
                        <label class="label" for="braintree_store_in_vault">
                            <span><!-- ko i18n: 'Save this card for future use'--><!-- /ko --></span>
                        </label>
                    </div>
                </div>
                <!-- /ko -->
            </fieldset>
        </form>

        <div class="payment-method-content">
            <div class="checkout-agreements-block">
                <!-- ko foreach: $parent.getRegion('before-place-order') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
                <!--/ko-->
            </div>
            <div class="actions-toolbar">
                <div class="primary">
                    <button class="action primary checkout"
                            type="submit"
                            data-bind="
                            click: preparePayment,
                            enable: (getCode() == isChecked()),
                            css: {disabled: !isPlaceOrderActionAllowed()}
                            "
                            disabled>
                        <span data-bind="i18n: 'Place Order'"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /ko -->
